<template>
	<view class="tabbar" :class="{ show }" @click.stop>
		<view class="content" :class="{ show }">
			<view class="tab" @click="toPage('/pages/index/index')">
				<view class="icon">
					<uni-icons type="home" size="20" color="#343434"></uni-icons>
				</view>
				<view class="txt">首页</view>
			</view>

			<!-- <view class="tab" @click="emit('showCatalogue')">
				<view class="icon">
					<image class="icon-image" src="/static/bookBar/catalogue.svg" lazy-load mode="widthFix"></image>
				</view>
				<view class="txt">目录</view>
			</view> -->

			<view class="tab" @click="emit('showSettings')">
				<view class="icon">
					<uni-icons type="font" size="20" color="#343434"></uni-icons>
				</view>
				<view class="txt">设置</view>
			</view>

			<view class="tab" @click="emit('toggle')">
				<view class="icon">
					<image class="icon-image" src="/static/bookBar/dark_mode.svg" lazy-load mode="widthFix"
						v-if="!isDark"></image>
					<image class="icon-image" src="/static/bookBar/daytime.svg" lazy-load mode="widthFix" v-else>
					</image>
				</view>
				<view class="txt">{{ isDark ? '白天' : '夜间' }}</view>
			</view>

			<view class="tab" @click="toPage('/pages/my/index')">
				<view class="icon">
					<!-- <image class="icon-image" src="/static/bookBar/Individual_center.svg" lazy-load mode="widthFix">
					</image> -->
					<uni-icons type="person" size="20" color="#343434"></uni-icons>
				</view>
				<view class="txt">个人中心</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	interface Props {
		show : boolean
		isDark : boolean
	}

	withDefaults(defineProps<Props>(), {
		show: false,
		isDark: false
	})

	const emit = defineEmits(['showCatalogue', 'showSettings', 'toggle'])

	const toPage = (url : string) => {
		if (!url) return
		uni.reLaunch({ url })
	}
</script>

<style scoped lang="scss">
	.tabbar {
		position: relative;
		height: 0;
		transition: all .4s;
		z-index: 4;


		&.show {
			height: 112rpx;
		}

		.content {
			position: fixed;
			left: 0;
			bottom: 0;
			padding-bottom: var(--height);
			@include size(100%, 88rpx);
			background-color: #fff;
			opacity: 0;
			transform: translateY(calc(88rpx + var(--height)));
			z-index: 9;
			transition: all .4s;
			display: flex;
			flex-wrap: nowrap;

			&.show {
				opacity: 1;
				transform: translateY(0);
			}

			.tab {
				width: 25%;
				@include center(flex);
				flex-direction: column;

				.icon {
					color: #000;
					height: 52rpx;
					@include center(flex);

					.icon-image {
						width: 32rpx;
					}
				}

				.txt {
					@include tx(24rpx, 1);
					color: #343434;
				}
			}
		}
	}
</style>